// 1.导入vue和vue-router路由模块
import Vue from 'vue'
import VueRouter from 'vue-router'


// 路由懒加载 用到的时候才会向静态服务器请求相应的组件js代码
const home = () => import('views/home/Home')
const Classify = () => import('views/category/Classify')
const ShoppingCar = () => import('views/shoppingcar/ShoppingCar')
const Me = () => import('views/myinfo/Me')
const detail = () => import('views/detail/detail')

// 2.调用Vue下面的use()方法,传入VueRouter,只要是插件就必须使用Vue下的use()方法来安装一下
Vue.use(VueRouter)

// 配置映射表

// 3.创建VueRouter的实例对象
const vuerouter = new VueRouter({
    routes: [
        {
            path: '',
            // 重定向到/home路径,/home所对应的组件是home组件
            // 所以当用户一打开页面就会自动跳转到首页的组件
            redirect: '/home',
            meta: {
                title: '首页'
            },
        },
        {
            path: '/home',
            component: home,
            meta: {
                title: '首页'
            },
            // 路由的嵌套:比如home页面有不同的组件页面显示,当用户点击哪个的时候才显示哪个,用的是children属性
            // children: [
            //   // {
            //   //     // 当进入home首页的时候,默认重定向显示messages组件页面
            //   //     path: '',
            //   //     redirect: 'messages'
            //   // },
            //   {
            //     path: 'messages',
            //     component: home_messages
            //   },
            //   {
            //     path: 'news',
            //     component: home_news,
            //   }
            // ]
        },
        {
            path: '/classify',
            component: Classify,
            meta: {
                title: '分类'
            }
        },
        {
            path: '/shoppingCar',
            component: ShoppingCar,
            meta: {
                title: '购物车'
            }
        },
        {
            path: '/me',
            component: Me,
            meta: {
                title: '我的'
            }
        },
        {
            path: '/detail/:id',
            component: detail,
            meta: {
                title: '详情页'
            }
        }
    ],
    // 把默认的hash模式改为html5的history模式,url看起来更舒服,没有拼接#
    mode: 'history',
    // 统一修改router-link标签的类名为active
    linkActiveClass: 'active'
})
// 解决多次点击跳转相同路由报错的代码
const VueRouterPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(to) {
    return VueRouterPush.call(this, to).catch(err => err)
}
// 导出vuerouter,挂载到Vue实例对象下
export default vuerouter